<template>
  <div class="views-container">
    <div class="wlm-form">
      <div class="wlm-form-header">配色方案设置</div>
      <div class="wlm-form-content">
        <el-form
          ref="help"
          :model="formFormatData.formData"
          :rules="formFormatData.rules"
          size="small"
          label-width="120px"
          class="retail-form"
          label-position="right"
        >
        <el-form-item label="">
            <p style="color:red">备注：首页组件配色需在平台装修自定义

            </p>
            <p style="color:red">小程序顶部配色当前设置主题只供预览参考，正式使用需要保存后重新发布小程序。</p>
          </el-form-item>
          <el-form-item label="方案名称">
            <el-input
              v-model="formFormatData.formData.theme_name"
              placeholder="请输入页面标题"
            ></el-input>
          </el-form-item>
          <el-form-item label="配色方案">
            <el-radio-group v-model="formFormatData.formData.color_scheme">
              <el-radio :label="1">推荐配色方案</el-radio>
              <el-radio :label="2">自定义风格</el-radio>
            </el-radio-group>
                <!-- <el-radio-group v-model="formFormatData.formData.goods_page_diy">
                  <el-radio label="1">传统列表</el-radio>
                  <el-radio label="2">快速购买</el-radio>
                </el-radio-group> -->
          </el-form-item>
          <div v-if="formFormatData.formData.color_scheme==1">
            <el-form-item label="推荐配色" >
              <div class="color-matching">
                  <!-- v-model="formFormatData.formData.model_Id" -->
                <div
                  class="list"
                  v-for="(item,index) in colorData"
                  :key="index"
                  @click="colorbtn(item.model_Id)"
                :class="{'colorchang':formFormatData.formData.model_Id==item.model_Id}">
                 <el-tooltip class="item" effect="dark" :content="item.colorData1" placement="top-start">
                    <span class="item" :style="`background-color:${item.colorData1};`"></span>
                 </el-tooltip>
                  <el-tooltip class="item" effect="dark" :content="item.colorData2" placement="top-start">
                    <span class="item" :style="`background-color:${item.colorData2};`"></span>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" :content="item.colorData3" placement="top-start">
                    <span class="item" :style="`background-color:${item.colorData3};`" style="border-color: rgb(239, 239, 239)"></span>
                  </el-tooltip>

                </div>
              </div>
            </el-form-item>
              <!-- :src="getPath('miaosha.jpg')" -->
            <el-form-item label="风格展示">
              <div class="color-image">
                <div v-for="(item,index) in colorData" :key="index">
                  <img style="background-repeat:no-repeat;" v-show="formFormatData.formData.model_Id==index" :src="formFormatData.formData.model_Id==index?`${getPath(item.backgroundImage)}`:''"/>
                </div>
              </div>
            </el-form-item>
            <div style="display:flex;flex-direction:row-reverse;">
              <div>该图片仅供参考,请以实物图为准!</div>
            </div>
            <el-form-item label="个人中心图标">
              <!-- 新版个人中心图标样式 -->
               <div class="iconfont" style="display:flex;align-items:center;">
                    <div class="form-help" style="text-align: center;">收货地址</div>
                    <img :src="pathUrl('shouhuodizhi')" />
                     <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.shouhuodizhi">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.shouhuodizhi"></el-input-number>
                     </div>
                </div>
                 <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                    <div class="form-help" style="text-align: center;">领劵中心</div>
                     <img :src="pathUrl('youhuiquan')" />
                     <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                           <el-radio-group v-model="formFormatData.formData.is_show.youhuiquan">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.youhuiquan"></el-input-number>
                     </div>
                </div>
                 <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                    <div class="form-help" style="text-align: center;">商家中心</div>
                       <img :src="pathUrl('shangjiazhongxin')" />
                     <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                           <el-radio-group v-model="formFormatData.formData.is_show.shangjiazhongxin">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    <div style="display:flex;">
                        <div>排序：</div>
                        <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.shangjiazhongxin"></el-input-number>
                     </div>
                </div>
                 <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                    <div class="form-help" style="text-align: center;width:48px;">设置</div>
                       <img :src="pathUrl('shezhi')" />
                     <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                           <el-radio-group v-model="formFormatData.formData.is_show.shezhi">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    <div style="display:flex;">
                        <div>排序：</div>
                        <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.shezhi"></el-input-number>
                     </div>
                </div>
                 <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                    <div class="form-help" style="text-align: center;width:48px;">客服</div>
                       <img :src="pathUrl('kefu')" />
                     <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                           <el-radio-group v-model="formFormatData.formData.is_show.kefu">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    <div style="display:flex;">
                        <div>排序：</div>
                        <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.kefu"></el-input-number>
                     </div>
                </div>
                 <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                    <div class="form-help" style="text-align: center;">我的抽奖</div>
                       <img :src="pathUrl('draw')" />
                     <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                           <el-radio-group v-model="formFormatData.formData.is_show.draw">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    <div style="display:flex;">
                        <div>排序：</div>
                        <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.draw"></el-input-number>
                     </div>
                </div>
                  <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                    <div class="form-help" style="text-align: center;">我的红包</div>
                       <img :src="pathUrl('bonus')" />
                     <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                           <el-radio-group v-model="formFormatData.formData.is_show.bonus">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    <div style="display:flex;">
                        <div>排序：</div>
                        <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.bonus"></el-input-number>
                     </div>
                </div>
                 <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                    <div class="form-help" style="text-align: center;">团长中心</div>
                       <img :src="pathUrl('leader')" />
                     <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                           <el-radio-group v-model="formFormatData.formData.is_show.leader">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    <div style="display:flex;">
                        <div>排序：</div>
                        <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.leader"></el-input-number>
                     </div>
                </div>
                <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                    <div class="form-help" style="text-align: center;">申请分销</div>
                       <img :src="pathUrl('shenqinfenxiao')" />
                     <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                           <el-radio-group v-model="formFormatData.formData.is_show.shenqinfenxiao">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    <div style="display:flex;">
                        <div>排序：</div>
                        <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.shenqinfenxiao"></el-input-number>
                     </div>
                </div>
                <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                    <div class="form-help" style="text-align: center;">分销中心</div>
                       <img :src="pathUrl('fenxiaozhongxin')" />
                     <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                           <el-radio-group v-model="formFormatData.formData.is_show.fenxiaozhongxin">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    <div style="display:flex;">
                        <div>排序：</div>
                        <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.fenxiaozhongxin"></el-input-number>
                     </div>
                </div>
                 <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                    <div class="form-help" style="text-align: center;">商家入驻</div>
                       <img :src="pathUrl('shangjiaruzhu')" />
                     <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                           <el-radio-group v-model="formFormatData.formData.is_show.shangjiaruzhu">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    <div style="display:flex;">
                        <div>排序：</div>
                        <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.shangjiaruzhu"></el-input-number>
                     </div>
                </div>
                <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                    <div class="form-help" style="text-align: center;width:48px;">帮助</div>
                       <img :src="pathUrl('bangzhu')" />
                     <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                           <el-radio-group v-model="formFormatData.formData.is_show.bangzhu">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    <div style="display:flex;">
                        <div>排序：</div>
                        <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.bangzhu"></el-input-number>
                     </div>
                </div>
                 <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                    <div class="form-help" style="text-align: center;width: 48px;">优惠券</div>
                       <img :src="pathUrl('yhq')" />
                     <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                           <el-radio-group v-model="formFormatData.formData.is_show.yhq">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    <div style="display:flex;">
                        <div>排序：</div>
                        <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.yhq"></el-input-number>
                     </div>
                </div>
                  <!-- 旧版个人中心图标样式废弃 -->
                 <!-- <div class="iconfont" style="display:flex;flex-wrap:wrap;width:940px;">
                  <div style="padding:10px;">

                    <img :src="pathUrl('shouhuodizhi')" />
                    <div class="form-help" style="text-align: center;">收货地址</div>
                  </div>
                  <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.shouhuodizhi"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.shouhuodizhi">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                   <div style="padding:10px;">
                     <img :src="pathUrl('youhuiquan')" />
                    <p class="form-help" style="text-align: center;">领劵中心</p>
                  </div>
                   <div>
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.youhuiquan"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.youhuiquan">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                   <div style="padding:10px;">
                     <img :src="pathUrl('shangjiazhongxin')" />
                    <p class="form-help" style="text-align: center;">商家中心</p>
                  </div>
                   <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.shangjiazhongxin"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.shangjiazhongxin">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                    <div style="padding:10px;">
                     <img :src="pathUrl('shezhi')" />
                    <p class="form-help" style="text-align: center;">设置</p>
                  </div>
                   <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.shezhi"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.shezhi">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                    <div style="padding:10px;">
                      <img :src="pathUrl('kefu')" />
                    <p class="form-help" style="text-align: center;">客服</p>
                  </div>
                   <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.kefu"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.kefu">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                    <div style="padding:10px;">
                      <img :src="pathUrl('draw')" />
                    <p class="form-help" style="text-align: center;">我的抽奖</p>
                  </div>
                   <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.draw"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.draw">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                   <div style="padding:10px;">
                      <img :src="pathUrl('bonus')" />
                    <p class="form-help" style="text-align: center;">我的红包</p>
                  </div>
                   <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.bonus"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.bonus">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                    <div style="padding:10px;">
                      <img :src="pathUrl('leader')" />
                    <p class="form-help" style="text-align: center;">团长中心</p>
                  </div>
                   <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.leader"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.leader">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                    <div style="padding:10px;">
                      <img :src="pathUrl('shenqinfenxiao')" />
                    <p class="form-help" style="text-align: center;">申请分销</p>
                  </div>
                   <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.shenqinfenxiao"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.shenqinfenxiao">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                   <div style="padding:10px;">
                      <img :src="pathUrl('fenxiaozhongxin')" />

                    <p class="form-help" style="text-align: center;">分销中心</p>
                  </div>
                   <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.fenxiaozhongxin"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.fenxiaozhongxin">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                    <div style="padding:10px;">
                      <img :src="pathUrl('shangjiaruzhu')" />

                    <p class="form-help" style="text-align: center;">商家入驻</p>
                  </div>
                   <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.shangjiaruzhu"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.shangjiaruzhu">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                   <div style="padding:10px;">
                      <img :src="pathUrl('bangzhu')" />

                    <p class="form-help" style="text-align: center;">帮助</p>
                  </div>
                   <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.bangzhu"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.bangzhu">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                   <div style="padding:10px;">
                      <img :src="pathUrl('yhq')" />

                    <p class="form-help" style="text-align: center;">优惠券</p>
                  </div>
                   <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.yhq"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.yhq">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                </div> -->
            </el-form-item>
          </div>

          <div v-if="formFormatData.formData.color_scheme==2">
            <el-form-item label="小程序辅助颜色">
              <el-color-picker
                :predefine="predefineColors"
                v-model="formFormatData.formData.help_color"
              ></el-color-picker>
              <p class="form-help">该颜色适用于商品详情</p>
            </el-form-item>
            <el-form-item label="小程序主题颜色">
              <el-color-picker
                :predefine="predefineColors"
                v-model="formFormatData.formData.theme_color"
              ></el-color-picker>
              <p class="form-help">此处设置管控除顶部外的页面上色彩模块儿（包括价格和购买按钮颜色）若不自行选择则用默认颜色（选择器下方有推荐色可供选择）</p>
            </el-form-item>
            <el-form-item label="小程序字体配色">
              <el-radio-group v-model="formFormatData.formData.auxiliary_color">
                <el-radio
                  label="#333333"
                  border
                >黑色</el-radio>
                <el-radio
                  label="#ffffff"
                  border
                >白色</el-radio>
              </el-radio-group>
              <p class="form-help">可控制顶部导航、购买按钮、个人信息等展示颜色</p>
            </el-form-item>
            <el-form-item label="个人中心自定义图标" :rules="formFormatData.rules" >
                <div class="form-help" style="margin:10px 0 20px 40px">建议上传图片大小尺寸为：50*50</div>
                <!-- 新版个人中心自定义图标样式 -->
                  <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                     <div class="form-help" style="text-align: center;">收货地址</div>
                      <choose-files ref="chooseFiles" :config="chooseBgConfig1" :changeEvt="formFormatFiltersChange"></choose-files>
                       <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.shouhuodizhi">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                       <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.shouhuodizhi"></el-input-number>
                     </div>
                  </div>
                     <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                     <div class="form-help" style="text-align: center;">领劵中心</div>
                      <choose-files ref="chooseFiles" :config="chooseBgConfig2" :changeEvt="formFormatFiltersChange"></choose-files>
                       <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.youhuiquan">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                       <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.youhuiquan"></el-input-number>
                     </div>
                  </div>
                  <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                     <div class="form-help" style="text-align: center;">商家中心</div>
                      <choose-files ref="chooseFiles" :config="chooseBgConfig3" :changeEvt="formFormatFiltersChange"></choose-files>
                       <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.shangjiazhongxin">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                       <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.shangjiazhongxin"></el-input-number>
                     </div>
                  </div>
                   <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                     <div class="form-help" style="text-align: center;width: 48px;">设置</div>
                      <choose-files ref="chooseFiles" :config="chooseBgConfig4" :changeEvt="formFormatFiltersChange"></choose-files>
                       <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.shezhi">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                       <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.shezhi"></el-input-number>
                     </div>
                  </div>
                  <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                     <div class="form-help" style="text-align: center;width: 48px;">客服</div>
                      <choose-files ref="chooseFiles" :config="chooseBgConfig5" :changeEvt="formFormatFiltersChange"></choose-files>
                       <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.kefu">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                       <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.kefu"></el-input-number>
                     </div>
                  </div>
                  <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                     <div class="form-help" style="text-align: center;width: 48px;">我的抽奖</div>
                      <choose-files ref="chooseFiles" :config="chooseBgConfig6" :changeEvt="formFormatFiltersChange"></choose-files>
                       <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.draw">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                       <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.draw"></el-input-number>
                     </div>
                  </div>
                  <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                     <div class="form-help" style="text-align: center;">我的红包</div>
                      <choose-files ref="chooseFiles" :config="chooseBgConfig7" :changeEvt="formFormatFiltersChange"></choose-files>
                       <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.bonus">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                       <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.bonus"></el-input-number>
                     </div>
                  </div>
                   <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                     <div class="form-help" style="text-align: center;">团长中心</div>
                      <choose-files ref="chooseFiles" :config="chooseBgConfig8" :changeEvt="formFormatFiltersChange"></choose-files>
                       <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.leader">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                       <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.leader"></el-input-number>
                     </div>
                  </div>
                  <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                     <div class="form-help" style="text-align: center;">申请分销</div>
                      <choose-files ref="chooseFiles" :config="chooseBgConfig9" :changeEvt="formFormatFiltersChange"></choose-files>
                       <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.shenqinfenxiao">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                       <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.shenqinfenxiao"></el-input-number>
                     </div>
                  </div>
                    <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                     <div class="form-help" style="text-align: center;">分销中心</div>
                      <choose-files ref="chooseFiles" :config="chooseBgConfig10" :changeEvt="formFormatFiltersChange"></choose-files>
                       <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.fenxiaozhongxin">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                       <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.fenxiaozhongxin"></el-input-number>
                     </div>
                  </div>
                  <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                     <div class="form-help" style="text-align: center;">商家入驻</div>
                      <choose-files ref="chooseFiles" :config="chooseBgConfig11" :changeEvt="formFormatFiltersChange"></choose-files>
                       <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.shangjiaruzhu">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                       <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.shangjiaruzhu"></el-input-number>
                     </div>
                  </div>
                   <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                     <div class="form-help" style="text-align: center;width: 48px;">帮助</div>
                      <choose-files ref="chooseFiles" :config="chooseBgConfig12" :changeEvt="formFormatFiltersChange"></choose-files>
                       <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.bangzhu">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                       <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.bangzhu"></el-input-number>
                     </div>
                  </div>
                    <div class="iconfont" style="margin-top:20px;display:flex;align-items:center;">
                     <div class="form-help" style="text-align: center;width: 48px;">优惠券</div>
                      <choose-files ref="chooseFiles" :config="chooseBgConfig12" :changeEvt="formFormatFiltersChange"></choose-files>
                       <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.yhq">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                       <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.yhq"></el-input-number>
                     </div>
                  </div>

                <!-- 旧版个人中心自定义图标样式废弃 -->
                <!-- <div class="iconfont" style="display:flex;flex-wrap:wrap;width:70%;">
                  <div style="padding:10px;">
                    <choose-files ref="chooseFiles" :config="chooseBgConfig1" :changeEvt="formFormatFiltersChange"></choose-files>
                    <div class="form-help" style="text-align: center;">收货地址</div>
                  </div>
                  <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.shouhuodizhi"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.shouhuodizhi">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                   <div style="padding:10px;">
                    <choose-files ref="chooseFiles" :config="chooseBgConfig2" :changeEvt="formFormatFiltersChange"></choose-files>
                    <p class="form-help" style="text-align: center;">领劵中心</p>
                  </div>
                   <div>
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.youhuiquan"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.youhuiquan">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                   <div style="padding:10px;">
                    <choose-files ref="chooseFiles" :config="chooseBgConfig3" :changeEvt="formFormatFiltersChange"></choose-files>
                    <p class="form-help" style="text-align: center;">商家中心</p>
                  </div>
                   <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.shangjiazhongxin"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.shangjiazhongxin">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                    <div style="padding:10px;">
                    <choose-files ref="chooseFiles" :config="chooseBgConfig4" :changeEvt="formFormatFiltersChange"></choose-files>
                    <p class="form-help" style="text-align: center;">设置</p>
                  </div>
                   <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.shezhi"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.shezhi">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                    <div style="padding:10px;">
                    <choose-files ref="chooseFiles" :config="chooseBgConfig5" :changeEvt="formFormatFiltersChange"></choose-files>
                    <p class="form-help" style="text-align: center;">客服</p>
                  </div>
                   <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.kefu"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.kefu">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                    <div style="padding:10px;">
                    <choose-files ref="chooseFiles" :config="chooseBgConfig6" :changeEvt="formFormatFiltersChange"></choose-files>
                    <p class="form-help" style="text-align: center;">我的抽奖</p>
                  </div>
                   <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.draw"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.draw">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                   <div style="padding:10px;">
                    <choose-files ref="chooseFiles" :config="chooseBgConfig7" :changeEvt="formFormatFiltersChange"></choose-files>
                    <p class="form-help" style="text-align: center;">我的红包</p>
                  </div>
                   <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.bonus"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.bonus">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                    <div style="padding:10px;">
                    <choose-files ref="chooseFiles" :config="chooseBgConfig8" :changeEvt="formFormatFiltersChange"></choose-files>
                    <p class="form-help" style="text-align: center;">团长中心</p>
                  </div>
                   <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.leader"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.leader">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                    <div style="padding:10px;">
                    <choose-files ref="chooseFiles" :config="chooseBgConfig9" :changeEvt="formFormatFiltersChange"></choose-files>
                    <p class="form-help" style="text-align: center;">申请分销</p>
                  </div>
                   <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.shenqinfenxiao"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.shenqinfenxiao">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                   <div style="padding:10px;">
                    <choose-files ref="chooseFiles" :config="chooseBgConfig10" :changeEvt="formFormatFiltersChange"></choose-files>
                    <p class="form-help" style="text-align: center;">分销中心</p>
                  </div>
                   <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.fenxiaozhongxin"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.fenxiaozhongxin">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                    <div style="padding:10px;">
                    <choose-files ref="chooseFiles" :config="chooseBgConfig11" :changeEvt="formFormatFiltersChange"></choose-files>
                    <p class="form-help" style="text-align: center;">商家入驻</p>
                  </div>
                   <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.shangjiaruzhu"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.shangjiaruzhu">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                   <div style="padding:10px;">
                    <choose-files ref="chooseFiles" :config="chooseBgConfig12" :changeEvt="formFormatFiltersChange"></choose-files>
                    <p class="form-help" style="text-align: center;">帮助</p>
                  </div>
                   <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.bangzhu"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.bangzhu">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                   <div style="padding:10px;">
                    <choose-files ref="chooseFiles" :config="chooseBgConfig13" :changeEvt="formFormatFiltersChange"></choose-files>
                    <p class="form-help" style="text-align: center;">优惠券</p>
                  </div>
                   <div >
                     <div style="display:flex;">
                        <div>排序：</div>
                      <el-input-number class="distribution_type_fenxiao60" style="width:60px;" :controls="false" v-model="formFormatData.formData.sort.yhq"></el-input-number>
                     </div>
                    <div style="display:flex;align-items:center;">
                        <div>是否显示：</div>
                          <el-radio-group v-model="formFormatData.formData.is_show.yhq">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="2">否</el-radio>
                          </el-radio-group>
                      </div>
                    </div>
                </div> -->

            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div
      v-cloak
      class="wlm-fixed-btn flex-row flex-align-c flex-justify-c"
    >
      <el-button
        size="small"
        @click="savebtn"
        type="primary"
        :loading="loading"
      >保存</el-button>

      <router-link
        tag="span"
        to="/application/themeColor"
      >
        <el-button size="small">返回</el-button>
      </router-link>
    </div>
  </div>
</template>
<script>
import {
  addDiyThemeInfo,
  getDiyThemeInfo,
  updateDiyThemeInfo
} from '@/api/platform'
import mixins from '@/mixins/mixins'
import ChooseFiles from '@/components/ChooseFiles/index'
export default {
  mixins: [mixins.getters('Form')],
  components: {
    ChooseFiles
  },
  data() {
    return {
      loading: false,
      input: '',
      colorDisplay: 2,
      formFormatData: {
        key: 'colorAdd',
        api: {
          editForm: {
            api: getDiyThemeInfo,
            // params: {
            //   id: ''
            // },
            redirect: 'theme_id',
            filters: {
              img: {
                bindInit: ['chooseBgConfig1', 'chooseBgConfig2', 'chooseBgConfig3', 'chooseBgConfig4', 'chooseBgConfig5', 'chooseBgConfig6', 'chooseBgConfig7',
                  'chooseBgConfig8', 'chooseBgConfig9', 'chooseBgConfig10', 'chooseBgConfig11', 'chooseBgConfig12','chooseBgConfig13']
              }
            }
          },
          submitForm: this.$route.query.theme_id ? updateDiyThemeInfo : addDiyThemeInfo// 判断路由有没有传参数

        },

        formData: {
          color_scheme:1, // 配色方案
          theme_name: '', // 主题名称
          help_color: '', // 辅助颜色
          theme_color: '', // 主题颜色
          auxiliary_color: '', // 辅助配色
          way: this.$route.query.theme_id ? 'update' : 'add', // 操作方式
          model_Id: 0,
          is_show:{
            bangzhu: "1",
            bonus: "1",
            draw: "1",
            fenxiaozhongxin: "1",
            kefu: "1",
            leader: "1",
            shangjiaruzhu: "1",
            shangjiazhongxin: "1",
            shenqinfenxiao: "1",
            shezhi: "1",
            shouhuodizhi: "1",
            yhq: "1",
            youhuiquan: "1",
          },
          sort:{
            bangzhu: "12",
            bonus: "11",
            draw: "5",
            fenxiaozhongxin: "13",
            kefu: "7",
            leader: "9",
            shangjiaruzhu: "10",
            shangjiazhongxin: "3",
            shenqinfenxiao: "2",
            shezhi: "8",
            shouhuodizhi: "1",
            yhq: "6",
            youhuiquan: "4",
          },
          bangzhu: [],
          shouhuodizhi: [],
          youhuiquan: [],
          shangjiazhongxin: [],
          shezhi: [],
          kefu: [],
          draw: [],
          bonus: [],
          leader: [],
          shenqinfenxiao: [],
          fenxiaozhongxin: [],
          shangjiaruzhu: [],
          yhq:[],
          icon_id: ''
        },
        rules: {
        }

      },
      styleData: {
        textcolor: '#AAAAAA',
        bgcolor: '#ffffff',
        textcoloron: '#000000'
      },
      // <!-- :src="getPath('miaosha.jpg')" -->
      colorData: [
        {
          colorData1: '#FF839B',
          colorData2: '#F8A306',
          colorData3: '#ffffff',
          backgroundImage: '1.png',
          model_Id: 0
        },

        {
          colorData1: '#AEAFEB',
          colorData2: '#94D0FD',
          colorData3: '#ffffff',
          backgroundImage: '2.png',
          model_Id: 1
        },
        {
          colorData1: '#2A2A2A',
          colorData2: '#00C290',
          colorData3: '#ffffff',
          backgroundImage: '3.png',
          model_Id: 2
        },
        {
          colorData1: '#965454',
          colorData2: '#FFD640',
          colorData3: '#333333',
          backgroundImage: '4.png',
          model_Id: 3
        },
        {
          colorData1: '#FF4444',
          colorData2: '#FF8357',
          colorData3: '#ffffff',
          backgroundImage: '5.png',
          model_Id: 4
        },
        {
          colorData1: '#9CD4CF',
          colorData2: '#A5927B',
          colorData3: '#ffffff',
          backgroundImage: '6.png',
          model_Id: 5
        },
        {
          colorData1: '#4A90E2',
          colorData2: '#F08B96',
          colorData3: '#ffffff',
          backgroundImage: '7.png',
          model_Id: 6
        },
        {
          colorData1: '#44BA5A',
          colorData2: '#BAE091',
          colorData3: '#ffffff',
          backgroundImage: '8.png',
          model_Id: 7
        },
        {
          colorData1: '#FFD940',
          colorData2: '#FF4444',
          colorData3: '#333333',
          backgroundImage: '9.png',
          model_Id: 8
        }
      ],
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        '#111111',
        '#aaaaaa',
        '#dddddd'
      ],
      chooseBgConfig1: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'shouhuodizhi',
          model: 'img'
        }
      },
      chooseBgConfig2: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'youhuiquan',
          model: 'img'
        }
      },
      chooseBgConfig3: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'shangjiazhongxin',
          model: 'img'
        }
      },
      chooseBgConfig4: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'shezhi',
          model: 'img'
        }
      }, // 设置
      chooseBgConfig5: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'kefu',
          model: 'img'
        }
      }, // 客服
      chooseBgConfig6: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'draw',
          model: 'img'
        }
      }, // 我的抽奖
      chooseBgConfig7: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'bonus',
          model: 'img'
        }
      }, // 我的红包
      chooseBgConfig8: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'leader',
          model: 'img'
        }
      }, // 团长中心
      chooseBgConfig9: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'shenqinfenxiao',
          model: 'img'
        }
      },
      chooseBgConfig10: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'fenxiaozhongxin',
          model: 'img'
        }
      },
      chooseBgConfig11: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'shangjiaruzhu',
          model: 'img'
        }
      },
      chooseBgConfig12: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'bangzhu',
          model: 'img'
        }
      },
      chooseBgConfig13: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'yhq',
          model: 'img'
        }
      }
    }
  },
  computed: {
    getstyleData() {
      return this.styleData
    },
    getPath() {
      return function(path) {
        return (path.includes('https://') || path.includes('http://')) ? `${path}` : require(`@/assets/image/${path}`)
      }
    },
    // pathUrl(){
    //   // :src="`${location.protocol}//${location.hostname}`+'/addons/weliam_areashop/web/assets/store/img/default/we/fenxiaozhongxin'+(formFormatData.formData.model_Id!=8?formFormatData.formData.model_Id:'')+'.png'" />
    //   return `${location.protocol}//${location.hostname}/${location.href.includes('addons/weliam_areashop') ? 'addons/weliam_areashop/' : ''}`+'web/assets/store/img/default/we/fenxiaozhongxin'+(this.formFormatData.formData.model_Id!=8?this.formFormatData.formData.model_Id:'')+'.png'
    // }
  },

  methods: {
    colorbtn(index) {
      this.formFormatData.formData.model_Id = index
    },
    pathUrl(url){
       return `${location.protocol}//${location.hostname}/${location.href.includes('addons/weliam_areashop') ? 'addons/weliam_areashop/' : ''}`+`web/assets/store/img/default/we/${url}`+(this.formFormatData.formData.model_Id!=8?this.formFormatData.formData.model_Id:'')+'.png'
    },
    savebtn(){
      // if(this.formFormatData.formData.sort.bangzhu
      //   ==this.formFormatData.formData.sort.bonus
      //   ==this.formFormatData.formData.sort.draw
      //   ==this.formFormatData.formData.sort.fenxiaozhongxin
      //   ==this.formFormatData.formData.sort.kefu
      //   ==this.formFormatData.formData.sort.leader
      //   ==this.formFormatData.formData.sort.shangjiaruzhu
      //   ==this.formFormatData.formData.sort.shangjiazhongxin
      //   ==this.formFormatData.formData.sort.shenqinfenxiao
      //   ==this.formFormatData.formData.sort.shezhi
      //   ==this.formFormatData.formData.sort.shouhuodizhi
      //   ==this.formFormatData.formData.sort.yhq
      //   ==this.formFormatData.formData.sort.youhuiquan
      // ){
      //   this.$message.error('请仔细检查排序是否填写重复！！')
      //   return 
      // }
       var ary = Object.values(this.formFormatData.formData.sort)
      var nary = ary.sort();
      for(var i = 0; i < nary.length - 1; i++) {
          if(nary[i] == nary[i + 1]) {
              // console.log("dddss",nary[i],nary[i+1])
              // this.$message.error('请仔细检查排序是否填写重复！！'+`重复排序${nary[i]}`)
              this.$message.error('请仔细检查排序是否填写重复！！')
              return
          }
      }
      this.formFormatSubmit({ router: { type: 'replace', path: '/application/themeColor', code: 1}})
    },
      formFormatCallBack(data, type, response) {
         if (type === "editForm") {
            const { color_scheme } = data;
            console.log("dddssssss",color_scheme)
            this.formFormatData.formData.color_scheme = color_scheme;
          }
      }
  }
}
</script>
<style lang="scss" scoped>
.color-matching {
  width: 400px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: -7.5px;
  .list {
    display: flex;
    margin-top: 15px;
    margin-right: 20px;
    cursor: pointer;
  }
  .colorchang {
    border: 2px solid #ff5353;
    border-radius: 2px;
    margin-right: 16px;
    margin-top: 11px;
  }
  .item {
    width: 25px;
    height: 25px;
    border: 1px solid #fff;
  }
}
// .sortnum{
//   /deep/ .el-input-number{
//     width: 100px;
//   }
// }
 .sortnum {
    /deep/ .el-input {
      width: 100px;
    }
  }
/deep/.iconfont{
    display: flex;
    margin-left: 20px;
    &>div{
    margin-left: 20px;
    }
    .file-item{
      margin: 0;
    }

  }
</style>
